可以使用百分比的样式属性

• 定位属性：top, right, bottom, left;
• 盒模型属性：height, width, margin, padding;
• 背景属性：background-position;
• 文本属性：text-indent, line-height, vertical-align;
• 字体属性：font-size;

2.1 定位属性

box为父元素，box1为子元素

2.2盒模型属性：height,width,margin,padding;

box为父元素，box1为子元素

height：基于包含它的块级对象的百分比高度。
width：基于包含它的块级对象的百分比宽度。

2.3背景属性：background-position;

• 图像中描述为 50% 50% 的点（中心点）;如果图像位于 0% 0%，其左上角将放在元素内边距区的左上角;如果图像位置是 100% 100%，会使图像的右下角放在右边距的右下角。
• 如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。
• background-position 的默认值是 0% 0%，在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺，除非您设置了不同的位置值。

2.4文本属性：text-indent,line-height,vertical-align;

2.5字体属性：font-size.

浏览器默认字体大小为16px,我们一般默认font-size=62.5%，但也可以根据浏览器窗口大小利用媒体查询进行适当调整。

em有继承特性，存在重复声明的情况，所以我们一般不建议采用。

rem根据html中font-size的声明进行使用，不存在重复声明，建议使用。

绝对定位的包含块

定位元素使用百分比单位后，它的参考目标是包含块。关于包含块（containing[kən'teɪnɪŋ] block）的概念，不能简单地理解成是父元素。如果是静态定位（static）和相对定位（relative），包含块一般就是其父元素。但是对于绝对定位（absolute）的元素，包含块应该是离它最近的 position 为 absolute、relative、或者 fixed 的祖先元素。

固定定位(fixed)的包含块

box为父元素，box1为子元素，box2为子元素

对固定定位的元素，它的包含块是视区（viewport：用户网页的可视区域）。